const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 由于webpack是基于NodeJS环境运行的，所以需要使用NodeJS的CommonJS模块化语法
// 用来告诉webpack该怎么去执行打包任务
module.exports = {
  // 打包模式：development（开发）、production（生产）
  mode: 'development',
  // __dirname：当前文件所在目录的绝对路径
  // 入口
  entry: path.join(__dirname, './src/index.js'),
  // 出口
  output: {
    // 指定文件夹
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',

    // 指定静态资源目录的路径
    publicPath: './',
  },
  module: {
    // 模块加载规则
    rules: [
      {
        // test：用来指定要加在的文件，指定加在以.css结尾的文件
        test: /\.css$/i,
        // 加载到css文件以后，先使用css-loade使用style-loader和css-loader进行处理
        // use的加载顺序：从后 -> 往前
        use: [
          // 将存起来css字符串，用style标签插入到页面中
          // 'style-loader',
          // 会将存起来的css字符串，输出到css文件中
          MiniCssExtractPlugin.loader,
          // 将css文件中的内容读取到js中，用字符串存起来
          'css-loader',
        ],
      },
      // 当匹配*.less结尾的文件时，用 less-loader -> css-loader -> style-loader 处理
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer'],
              },
            },
          },
          'less-loader',
        ],
      },
      // base64编码的图片（基于算法编码出来的一串特殊的字符，可以直接在浏览器上访问的图片）：
      //   优点：可以减少网络请求，减轻服务器压力
      //   缺点：导致文件体积增大，增加网络流量负担
      //      limit：小于8kb时，才转换成base64，速度会快，大于8kb时，直接就用真正的图片地址，发网络请求
      { test: /\.jpg$/i, use: 'url-loader?limit=8000' },
      { test: /\.html$/i, use: 'html-loader' },
      // exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
    ],
  },
  // 插件配置
  plugins: [
    // 会自动引入打包后的资源
    new HtmlWebpackPlugin({
      // 指令HTML文件的路径
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin(),
  ],
  // 开发服务器配置，是基于express启动的一个服务器，用来托管打包后的资源，并且会监听代码的变化自动重新打包
  // 注意：改了配置文件是需要重启的，这监听不到变化
  // 如果启动时devServer，那么打包的资源不会输出到硬盘上，会在内存中
  devServer: {
    // 打包后的资源在哪里？
    contentBase: path.join(__dirname, 'dist'),
    // 是否开启gzip压缩
    // compress: true,
    // 启动端口号
    port: 8080,
    // 启动后，是否自动打开页面，默认 false
    open: true,
  },
};
